<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>hello</title>
</head>
<body>
	<!-- 准备好容器 -->
	<div id="test1"></div>

	<!-- 引入react核心库，引入后全局多了一个React对象 -->
	<script src="../lib/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作dom，引入后全局多了一个ReactDOM对象 -->
	<script src="../lib/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script src="../lib/babel.min.js"></script>
  <!-- 引入prop-types，用于对组件标签属性进行限制，引入后全局多了一个PropTypes对象 -->
  <script src="../lib/prop-types.js"></script>

	<script type="text/babel">
    class Life extends React.Component{
      state = {
        opacity: 1
      }

      xiezai = () => {
        // 卸载组件
        ReactDOM.unmountComponentAtNode(document.getElementById('test1'));
      }

      // 组件挂在完毕
      componentDidMount() {
        this.timer = setInterval(() => {
          let {opacity} = this.state;
          opacity -= 0.1;
          if(opacity <= 0) opacity = 1;
          this.setState({opacity});
        }, 200);
      }

      // 组件将要卸载
      componentWillUnmount() {
        clearInterval(this.timer);
      }

      // 初始化渲染、状态更新之后
      render() {
        return (
          <div>
            <h2 style={{opacity: this.state.opacity}}>抗美援朝烈士英灵永垂不朽</h2> 
            <button onClick={this.xiezai}>卸载</button>
          </div>
        )
      }
    }

		// 2.渲染虚拟DOM到页面
		ReactDOM.render(<Life/>, document.getElementById('test1'));
	</script>
</body>
</html>